<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script>
        function fn(a, b, c) {
            let currentChild = document.getElementById(a);
            let bChild = document.getElementById(b);
            let cChild = document.getElementById(c);

            // 当点击事件源的时候,有两种情况
            // 1.当前列表处于隐藏状态
            if (currentChild.style.display == "none") {
                // 当前节点需要显示出来
                currentChild.style.display = "block";
                // 其他节点全部隐藏
                bChild.style.display = "none";
                cChild.style.display = "none";
                return;
            }

            // 2.当前列表处于显示状态
            // 当前节点隐藏即可
            // 由于当前节点是显示状态,那么其他节点一定都是隐藏的,因此不需要操作
            currentChild.style.display = "none";
        }
    </script>
</head>
<body>
<!--
    三个列表中同一时间最多只有一个列表允许展开,可以全部隐藏
    当点击某一个列表时,如果该列表是隐藏的,则展开该列表,隐藏其他列表
    如果该列表是展开的,则隐藏该列表
-->
<h3 onclick="fn('u1','u2','u3')">家用电器</h3>
<ul id="u1" style="display: none;">
    <li>电视</li>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
</ul>
<h3 onclick="fn('u2','u1','u3')">电子产品</h3>
<ul id="u2" style="display: none;">
    <li>手机</li>
    <li>pad</li>
    <li>电子表</li>
</ul>
<h3 onclick="fn('u3','u2','u1')">学习用品</h3>
<ul id="u3" style="display: none;">
    <li>笔记本</li>
    <li>签字笔</li>
    <li>钢笔</li>
</ul>

</body>
</html>